<template>
	<div class="management-page">
        <div class="login-btn">
            <el-button type="primary" size="mini" @click="toLogin"
					>退出登录</el-button
				>
        </div>
		<div class="query-form">
			<el-form>
				<el-form-item label="模板名称" label-width="4.5rem">
					<el-input v-model="name"></el-input>
				</el-form-item>
			</el-form>
			<div class="btn-style">
				<el-button type="primary" size="mini" @click="getlist"
					>搜索</el-button
				>
				<el-button type="primary" size="mini" @click="getDetail('')"
					>新增</el-button
				>
			</div>
		</div>
		<div class="table-wrap">
			<div class="table-row">
				<div>用户名</div>
				<div>模板名称</div>
				<div>操作</div>
			</div>
			<div v-for="item in tableData" :key="item.id">
				<div class="table-row">
					<div @click="getDetail(item.id)">{{ item.username }}</div>
					<div @click="getDetail(item.id)">{{ item.name }}</div>
					<div>
						<el-button
							@click="delOne(item.id)"
							type="danger"
							size="mini"
							>删除
						</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			tableData: [],
			name: '',
		}
	},
	created() {
		window.sessionStorage.removeItem('form')
		this.getlist()
	},
	methods: {
		async getDetail(id) {
			// await
			if (id !== '') {
				const { data: res } = await this.$http.get(
					`/order/getById?id=${id}`
				)
				window.sessionStorage.setItem('form', JSON.stringify(res.data))
			}
			this.$emit('push', 'home')
		},

		async delOne(id) {
			const confirmResult = await this.$confirm(
				'此操作将永久删除该模板, 是否继续?',
				'提示',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			).catch((err) => err)
			if (confirmResult !== 'confirm')
				return this.$message.info('已取消删除操作')
			const { data: res } = await this.$http.get(`/order/delete?id=${id}`)
			if (res.code !== 200)
				return this.$message.error('删除失败')
			this.$message.success('删除成功')
			this.getlist()
		},
		addClick() {
			this.$emit('push', 'home')
		},
        toLogin() {
            this.$emit('push', 'login')
        },
		async getlist() {
			let userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
			const { data: res } = await this.$http.get(
				`/order/list?userId=${userInfo.id}&name=${this.name}`
			)
			this.tableData = res.data
		},
	},
}
</script>

<style>
.management-page {
	height: 100%;
}
.query-form {
	padding: 1rem;
}
.btn-style {
	display: flex;
	justify-content: end;
}
.table-row {
	display: grid;
	margin: 0.5rem 1rem;
	grid-template-columns: 20% 60% 20%;
}
.login-btn {
    display: flex;
    justify-content: end;
    padding: 1rem 1rem 0 0
}
</style>
